<template>
    <div>
      <el-drawer :with-header="false" :visible.sync="drawer" direction="rtl" :before-close="close" size="75%"
        :append-to-body="true" destroy-on-close :modal-append-to-body="false">
        <div type="primary" class="drawer-close-btn" @click="close"><img class="drawer-back" src="@/assets/images/drawer-back.png" alt=""><span class="close-text">返回线索列表</span>
      </div>
        <div class="drawer-con-wrap">
          <div class="drawer-header">
            <!-- 头 -->
            <div class="custom-header">
              <!-- 左侧信息 -->
              <div class="header-left">
                <div class="star-list" style="margin-right: 8px;">
                  <i class="el-icon-star-off" @click="attentClick()" v-if="!sfAttent"></i>
                  <i class="el-icon-star-on" v-else @click="attentClick()"></i>
                </div>
  
                <el-tooltip class="item" effect="dark" :content="customInfo.customerName" placement="top">
                  <span class="customer-name">{{ customInfo.customerName }}</span>
                </el-tooltip>
                <!-- 左右箭头 -->
                <div class="arrow-Left arrowBox"><i class="el-icon-arrow-left"></i></div>
                <div class="arrow-Right arrowBox" style="margin-left: 12px;"><i class="el-icon-arrow-right"></i></div>
              </div>
              <!-- 右侧按钮 -->
              <div class="header-right">
                <el-button type="primary"
                  style="width: 66px;height: 40px;background: #204EC4;border-radius: 4px;">编辑</el-button>
                <el-button class="header-right-box" style="width: 99px;">呼叫中心</el-button>
                <el-button class="header-right-box" style="width: 130px;">更改成交状态</el-button>
                <el-button class="header-right-box" style="width: 40px;"><i class="el-icon-more"></i></el-button>
              </div>
            </div>
  
            <!-- 编辑标签 -->
            <div class="link mt8">
              <el-tooltip class="item" effect="dark" content="编辑标签" placement="top">
                <i class="el-icon-link pointer edit-link"></i>
              </el-tooltip>
            </div>
            <!-- 灰色框内容 -->
            <div class="custom-base mt8">
              <div class="custom-base-item">
                <div class="item-label">线索来源</div>
                <div class="item-value mt8">{{ customInfo.clueFrom }}</div>
              </div>
              <div class="custom-base-item">
                <div class="item-label">手机</div>
                <div class="item-value mt8">{{ customInfo.phoneNum }}</div>
              </div>
              <div class="custom-base-item">
                <div class="item-label">负责人</div>
                <div class="item-value mt8">{{ customInfo.ownerUserName }}</div>
              </div>
              <div class="custom-base-item">
                <div class="item-label">创建时间</div>
                <div class="item-value mt8">{{ customInfo.createTime }}</div>
              </div>
              <!-- <div class="custom-base-item">
                <div class="item-label">首要联系人电话<i class="rp rp-icon-fill-help rp-help-tips ml4"></i></div>
                <div class="item-value mt8 phone">{{ customInfo.contactsMobile }}</div>
              </div> -->
            </div>
  
  
            <!--  -->
            <div class="info-block-wrap">
              <div class="info-left-wrap">
                <el-tabs v-model="activeName" @tab-click="handleClick">
                  <el-tab-pane label="活动" name="activity">
                    <activityBlock :inShow="inShow"/>
                  </el-tab-pane>
                  <el-tab-pane label="详细资料" name="particular">详细资料</el-tab-pane>
                  <el-tab-pane label="工商信息" name="crm">客户关系</el-tab-pane>
                  <el-tab-pane label="附件" name="accessory">
                    <accessoryBlock />
                  </el-tab-pane>
                  <el-tab-pane label="操作记录" name="address">
                    <RelativeHandle/>
                  </el-tab-pane>
                  <!-- <el-tab-pane label="发票" name="invice">
                    <invoice></invoice>
                  </el-tab-pane> -->
                </el-tabs>
              </div>
              <!-- 客户摘要 -->
              <!-- <customSummary ref="customSummary" /> -->
            </div>
          </div>
        </div>
      </el-drawer>
    </div>
  </template>
  <script>
  import data from './data.js';
  import activityBlock from '@/components/busComponents/activityBlock'
  import accessoryBlock from '@/components/busComponents/accessoryBlock'
  import contactsBlock from '@/components/busComponents/contactsBlock'
  import customAddress from '@/components/busComponents/customAddress/index.vue'
  import invoice from '@/components/busComponents/invoice/index.vue'
  import customSummary from '@/components/busComponents/customSummary/index.vue'
  import RelativeHandle from '@/components/busComponents/RelativeHandle'
  
  export default {
    name:'cluePoolDrawer',
    components: { activityBlock, contactsBlock, customAddress, invoice, customSummary, accessoryBlock, RelativeHandle},
    data() {
      return {
        drawer: false,
        customInfo: data.info,
        customSbstractFlg: true,
        activeName: 'activity',
        sfAttent: false,
        // 控制显隐
        inShow:'false',
      }
    },
    methods: {
      show(){
        this.drawer = true;
            },
      close(){
        this.drawer = false;
      },
      handleClick() {
  
      },
      attentClick() {
        this.sfAttent = !this.sfAttent;
        this.$message({
          message: this.sfAttent ? '关注成功' : '取消关注成功',
          type: 'success'
        });
      }
    }
  }
  </script>
  <style lang="scss" scoped>
  @import "@/assets/styles/drawer-back.scss";
  ::v-deep .el-icon-arrow-left:before {
    width: 24px;
    height: 24px;
  }
  
  .header-right-box {
    height: 40px;
    background: #FFFFFF;
    border-radius: 4px;
    border: 1px solid #D7DBEC;
  }
  
  .arrowBox {
    margin-left: 18px;
    width: 40px;
    height: 40px;
    background: #FFFFFF;
    border-radius: 4px;
    border: 1px solid #D7DBEC;
    font-size: 24px;
    text-align: center;
    align-items: center;
    display: flex;
    justify-content: center;
  }
  
  .drawer-con-wrap {
    .mt8 {
      margin-top: 8px;
    }
  
    padding: 32px 32px 16px;
  
    .drawer-header {
      .header-name {
        font-size: 14px;
        color: #6b778c;
      }
  
      .custom-header {
        margin-top: 2px;
        display: flex;
        align-items: center;
        justify-content: space-between;
  
        .header-left {
          display: flex;
          align-items: center;
  
          .customer-name {
            font-size: 22px;
            font-weight: 700;
            color: #172b4d;
          }
  
          .star-list {
            margin-left: 10px;
  
            .el-icon-star-off {
              font-size: 18px;
              font-weight: 700;
              color: #dfe1e6;
              cursor: pointer;
            }
  
            .el-icon-star-on {
              color: #fac23d;
              margin-left: -3px;
              font-size: 22px;
              font-weight: 700;
              cursor: pointer;
            }
          }
        }
      }
  
      .link {
        .edit-link {
          font-size: 16px;
          margin-left: 8px;
        }
      }
  
      .custom-base {
        padding: 16px;
        background-color: #f4f5f7;
        border-radius: 3px;
        display: flex;
        align-items: stretch;
        flex-direction: row;
  
        .custom-base-item {
          flex: 0 0 20%;
  
          .item-label {
            color: #6b778c;
          }
  
          .item-value {
            color: #172b4d;
            font-weight: 500;
          }
  
          .phone {
            color: #36b37e;
          }
        }
      }
  
      .info-block-wrap {
        display: flex;
        margin-top: 16px;
        align-items: stretch;
        flex-direction: row;
  
        .info-left-wrap {
          flex: 1;
          padding-right: 40px;
          overflow: hidden;
          width: 100%;
        }
      }
    }
  }
  </style>